<template>
  <div class="VPagination">
    <h1>This is an VPagination page</h1>
    <a-pagination
      v-model="current"
      :total="500"
      :default-current="6"
      show-less-items
    />
    <br />
    <a-pagination
      show-size-changer
      :default-current="3"
      :total="500"
      @showSizeChange="onShowSizeChange()"
    />
    <br />
    <a-pagination
      v-model="current"
      :page-size-options="pageSizeOptions"
      :total="total"
      show-size-changer
      :page-size="pageSize"
      @showSizeChange="onShowSizeChange()"
    >
      <template slot="buildOptionText" slot-scope="props">
        <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
        <span v-if="props.value === '50'">全部</span>
      </template>
    </a-pagination>
    <br />
    <div>
      <a-pagination
        show-quick-jumper
        :default-current="2"
        :total="500"
        @change="onChange()"
      />
    </div>
    <br />
    <div>
      <a-pagination
        :total="85"
        :show-total="total => `Total ${total} items`"
        :page-size="20"
        :default-current="1"
      />
      <br />
      <a-pagination
        :total="85"
        :show-total="
          (total, range) => `${range[0]}-${range[1]} of ${total} items`
        "
        :page-size="20"
        :default-current="1"
      />
      <br />
      <a-pagination
        :total="85"
        :show-total="
          (total, range) => `${range[0]}-${range[1]} of ${total} items`
        "
        :page-size="20"
        :default-current="1"
        v-model="current"
        :page-size-options="pageSizeOptions"
        show-size-changer
        @showSizeChange="onShowSizeChange()"
        show-quick-jumper
        @change="onChange()"
      >
        <template slot="buildOptionText" slot-scope="props">
          <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
          <span v-if="props.value === '50'">全部</span>
        </template>
      </a-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      pageSizeOptions: ["10", "20", "30", "40", "50"],
      current: 1,
      pageSize: 10,
      total: 50
    };
  },
  watch: {
    pageSize(val) {
      console.log("pageSize", val);
    },
    current(val) {
      console.log("current", val);
    }
  },
  methods: {
    onShowSizeChange(current, pageSize) {
      console.log(current, pageSize);
      this.pageSize = pageSize;
    },
    onChange(pageNumber) {
      console.log("Page: ", pageNumber);
      this.pageSize = pageNumber;
    }
  }
};
</script>
